<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作日志列表2</title>
        <!--引用css/bootstrap.min.css -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>

    <style>
        .table th, .table td { vertical-align: middle; }
        .pagination .page-link { min-width: 36px; text-align: center; }
        .pagination-summary { margin-top: 16px; color: #888; }
        .search-bar input, .search-bar select { min-width: 120px; margin-right: 8px; }
        .search-bar { margin-bottom: 16px; }
        .pagination-bar {
            font-size: 13px;
        }
        .pagination-sm .page-link {
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border-radius: 4px !important;
            margin: 0 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .pagination-sm .active .page-link {
            background: #1677ff;
            color: #fff;
            border-color: #1677ff;
        }
        .form-select-sm, .form-control-sm {
            font-size: 13px;
            height: 32px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
{% verbatim %}
<div id="app" class="container-fluid mt-4">
    <div class="card">
        <div class="card-body">
            <!-- 搜索栏 -->
            <form class="row search-bar align-items-center g-2 mb-3">
                <div class="col-auto">
                    <input type="text" class="form-control" placeholder="用户名" >
                </div>
                <div class="col-auto">
                    <select class="form-select">
                        <option value="">状态</option>
                        <option value="成功">成功</option>
                        <option value="失败">失败</option>
                    </select>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary">查 询</button>
                </div>
            </form>
            <!-- 表格 -->
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>登录地址</th>
                            <th>登录地点</th>
                            <th>浏览器</th>
                            <th>操作系统</th>
                            <th>登录标签</th>
                            <th>操作信息</th>
                            <th>登录状态</th>
                            <th>登录日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in pageInfo.items" :key="item.id">
                            <td><input type="checkbox" :value="item.id"></td>
                            <td>{{ item.id }}</td>
                            <td>{{ item.user_name }}</td>
                            <td>{{ item.login_ip }}</td>
                            <td>{{ item.login_location }}</td>
                            <td>{{ item.browser }}</td>
                            <td>{{ item.os }}</td>
                            <td>{{ item.login_tag }}</td>
                            <td>{{ item.operate_info }}</td>
                            <td>
                                <span :class="['badge', item.status === 'success' ? 'bg-success' : 'bg-danger']">{{ item.status }}</span>
                            </td>
                            <td>{{ item.login_date }}</td>
                            <td><a href="#" class="text-primary">详情</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页部分抽为组件 -->
            <Page :page-info="pageInfo" @change="onPageChange" />
        </div>
    </div>
</div>

<script src="/static/js/vue.global.js"></script>
<script>
const { createApp, ref, computed, watch, onMounted, reactive, defineComponent } = Vue;

// 分页组件
const Page = {
  props: {
    pageInfo: {
      type: Object,
      required: true
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const gotoPage = ref(props.pageInfo.current_page || 1);
    const totalPages = computed(() => props.pageInfo.total_pages || 1);
    const visiblePages = computed(() => {
      let pages = [];
      let total = totalPages.value;
      let cur = props.pageInfo.current_page;
      if (total <= 7) {
        for (let i = 1; i <= total; i++) pages.push(i);
      } else {
        if (cur <= 4) {
          pages = [1,2,3,4,5,'...',total];
        } else if (cur >= total - 3) {
          pages = [1,'...',total-4,total-3,total-2,total-1,total];
        } else {
          pages = [1,'...',cur-1,cur,cur+1,'...',total];
        }
      }
      console.log('visiblePages:', pages);
      return pages;
    });
    function changePage(page) {
      if (typeof page === 'string') return;
      if (page >= 1 && page <= totalPages.value) {
        emit('change', { ...props.pageInfo, current_page: page });
        gotoPage.value = page;
      }
    }
    function changePageSize(e) {
      emit('change', { ...props.pageInfo, page_size: Number(e.target.value), current_page: 1 });
      gotoPage.value = 1;
    }
    function jumpToPage() {
      if (gotoPage.value >= 1 && gotoPage.value <= totalPages.value) {
        emit('change', { ...props.pageInfo, current_page: gotoPage.value });
      }
    }
    watch(() => props.pageInfo.current_page, (val) => {
      gotoPage.value = val;
    });
    return {
      gotoPage,
      totalPages,
      visiblePages,
      changePage,
      changePageSize,
      jumpToPage
    };
  },
  template: `
    <div class="d-flex justify-content-end align-items-center mt-3 flex-wrap">
      <div class="d-flex align-items-center pagination-bar">
        <span class="text-secondary small">共 {{ pageInfo.total }} 条</span>
        <select :value="pageInfo.page_size" class="form-select form-select-sm w-auto mx-1 me-3"
                style="min-width: 80px;white-space:nowrap;"
                @change="changePageSize">
          <option :value="5">5条/页</option>
          <option :value="10">10条/页</option>
        </select>
        <ul class="pagination pagination-sm mb-0 align-items-center">
          <li class="page-item" :class="{disabled: pageInfo.current_page === 1}">
            <a class="page-link" href="#" @click.prevent="changePage(pageInfo.current_page-1)">&lt;</a>
          </li>
          <li class="page-item" v-for="page in visiblePages" :key="page"
              :class="{active: pageInfo.current_page === page, disabled: page === '...'}">
            <a v-if="page !== '...'" class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
            <span v-else class="page-link">...</span>
          </li>
          <li class="page-item" :class="{disabled: pageInfo.current_page === totalPages}">
            <a class="page-link" href="#" @click.prevent="changePage(pageInfo.current_page+1)">&gt;</a>
          </li>
        </ul>
        <span class="ms-2 small">前往</span>
        <input type="number" min="1" :max="totalPages" v-model.number="gotoPage" @keyup.enter="jumpToPage"
               class="form-control form-control-sm d-inline-block mx-1" style="width:50px;">
        <span class="small">页</span>
        <button class="btn btn-outline-secondary btn-sm ms-1" @click="jumpToPage">跳转</button>
      </div>
    </div>
  `
};

const app=createApp({
    setup() {
        // 定义pageInfo对象
        const pageInfo=reactive({
            page:1,
            page_size:10,
            total:0,
            total_pages:0,
            items:[],
            current_page:1,
            goto_page:1,
        });

        /**查询日志列表数据
         * @param start
         * @param page_size
         * @param paramStr
        */
        const query_log_list=(start=1,page_size=10,paramStr='')=>{
            axios({
                method: 'get',
                url: '/blog/api/user/operate_log/?page='+start+'&page_size='+page_size+'&'+paramStr,
            }).then(res => {
                if (res.data.code === 0) {
                    // 封装pageInfo对象
                    pageInfo.items = res.data.result.data;
                    pageInfo.total = res.data.result.total;
                    pageInfo.total_pages = res.data.result.total_pages;
                    pageInfo.page_size = res.data.result.page_size;
                    pageInfo.page= res.data.result.page;
                    pageInfo.current_page = res.data.result.page;
                }
            }).catch(err => {
                console.log(err);
            })
        }

        // 分页变化时的处理
        function onPageChange(newPageInfo) {
            pageInfo.current_page = newPageInfo.current_page;
            pageInfo.page_size = newPageInfo.page_size;
            query_log_list(pageInfo.current_page, pageInfo.page_size);
        }

        onMounted(() => {
           query_log_list();
        });

        return {
            pageInfo,
            onPageChange
        };
    },
    components: {
        Page
    }
});
app.mount('#app');
</script>
</body>
{% endverbatim %}
</html>